﻿@{
    Layout = null;
    ViewData["Title"] = "PositionClassSet";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />

<h1>职位分类PositionSet</h1>
<div id="app">
    <el-row>
        <el-col :span="2"><el-button type="success" v-on:click="addkind">新增</el-button></el-col>
    </el-row>
    <el-table :data="tableData"
              style="width: 100%">
        <el-table-column prop="major_kind_id"
                         label="职位分类编号"
                         width="160">
        </el-table-column>
        <el-table-column prop="major_kind_name"
                         label="职位分类名称"
                         width="160">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button size="mini"
                           v-on:click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="danger"
                           v-on:click="handleDelete(scope.row.mfk_id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-on:size-change="handleSizeChange"
                   v-on:current-change="handleCurrentChange"
                   :current-page="pagecurrent"
                   :page-sizes="[3, 6, 9, 11]"
                   :page-size="pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="rows">
    </el-pagination>
    @*新增模态框*@
    <el-dialog title="新增职位分类"
               :visible.sync="AdialogVisible"
               width="55%">
        <el-form ref="form" :model="config_major_kind" label-width="150px">
            <el-form-item label="职位分类编号">
                <el-input v-model="config_major_kind.major_kind_id" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="职位分类名称">
                <el-input v-model="config_major_kind.major_kind_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="AdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitAdd">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    @*修改模态框*@
    <el-dialog title="修改职位分类"
               :visible.sync="UdialogVisible"
               width="55%">
        <el-form ref="form" :model="config_major_kind" label-width="150px">
             <el-form-item label="职位分类编号">
                <el-input v-model="config_major_kind.major_kind_id"></el-input>
            </el-form-item>
            <el-form-item label="职位分类名称">
                <el-input v-model="config_major_kind.major_kind_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="UdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitUdp">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //集合
            tableData: [],
            //实体类
            config_major_kind: {
                mfk_id: '',
                major_kind_id: '',
                major_kind_name: '',
            },
            //模态框开启标记
            AdialogVisible: false,
            UdialogVisible: false,
            //页面容量
            pagesize: 3,
            //页下标
            pagecurrent: 1,
            //总数据条数
            rows: 0,
        },
        methods: {
            //刷新
            fill() {
                axios.get('/PositionSet/PositionClassFill?pgsize=' + this.pagesize + '&pgcurrent=' + this.pagecurrent).then((res) => {
                    this.tableData = res.data.tabs;
                    this.rows = res.data.rows;
                });
            },
            //打开新增模态框
            addkind() {
                this.AdialogVisible = true;
                this.config_public_char = {};
            },
            //提交新增
            onSubmitAdd() {
                axios.post('/PositionSet/PositionClassAdd', {
                    major_kind_name: this.config_major_kind.major_kind_name
                }).then(res => {
                    this.resultInform(res.data, "新增");
                    this.AdialogVisible = false;
                });
            },
            //修改编辑按钮，打开修改模态框
            handleEdit(row) {
                //文本框的赋值回显
                this.config_major_kind = row;
                //下拉列表框值回显绑定
                this.config_major_kind.major_kind_id = row.major_kind_id;
                this.config_major_kind.major_kind_name = row.major_kind_name;
                this.UdialogVisible = true;
            },
            //提交修改
            onSubmitUdp() {
                axios.post('/PositionSet/PositionClassUpdate', {
                    mfk_id:this.config_major_kind.mfk_id,
                    major_kind_id:this.config_major_kind.major_kind_id,
                    major_kind_name: this.config_major_kind.major_kind_name
                }).then(res => {
                    this.resultInform(res.data, "修改");
                    this.UdialogVisible = false;
                })
            },
            //删除按钮
            handleDelete(id) {
                this.$confirm("确定要删除该职位分类信息吗？", "温馨提示").then(() => {
                    axios.delete('/PositionSet/PositionClassDelete?mfk_id=' + id).then((res) => {
                        this.resultInform(res.data, "删除");
                    })
                }).catch((error) => {
                    console.info("取消删除！" + error);
                })
            }, handleSizeChange(val) {
                //页面容量改变事件
                this.pagesize = val;
                this.fill();
            },
            handleCurrentChange(val) {
                //页下标改变事件
                this.pagecurrent = val;
                this.fill();
            },
            //结果通知方法
            resultInform(res, oper) {
                if (res > 0) {
                    this.openmessuc("职位分类" + oper + "成功！");
                    this.fill();
                } else {
                    this.openmeswar("职位分类" + oper + "有误！");
                }
            },
            //成功弹窗
            openmessuc: function(mes) {
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            //警告弹窗
            openmeswar: function(mes) {
                this.$message({
                    message: mes,
                    type: 'danger'
                });
            },
        },
        mounted: function() {
            this.fill();
        }
    });
</script>
